@import "_reset.scss";
@import "_jc_tool.scss";
@charset "utf-8";

.wrap{

    width: r(640px);
    height: r(1136px);
    background: $bg;
}

.section-ziliao{
    font-size: 0;
    width: r(640px);
    height: r(302px);
    background: white;
  
    .ziliao{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: r(640px);
        height: r(166px);
        .touxiang{
      
            width: r(120px);
            height: r(120px);
             border-radius: r(50px);
             overflow: hidden;
             .touxiang-img{
                  width: 100%;
                 height:100%;
             }
     
         
         }

         .detail{
             width: r(464px);
             height: r(120px);
            //  background:skyblue;
            display: flex;
            justify-content: space-between;
            line-height: r(42px);
             .detail-msg{
                .username{
                    font-size: r(28px);
                   
                }
                .phone-num{
                    font-size: r(24px);
                    color: #666666;
                }
                .nickName{
                    font-size: r(24px);
                    color: #666666;
                }
             }
             .set-beizhu{
                 width: r(120px);
                 height: r(47px);
                 border: r(1px) solid #666666;
                 border-radius: r(5px);
                 color: #666666;
                 font-size: r(24px);
                 margin-top: r(73px);
                 text-align: center;
                 line-height: r(47px);
             }
         }
    }
}

.shuju{
    width: r(640px);
    height: r(157px);
    display: flex;
   
    .leiji-span{
        width: r(320px);
        height: r(157px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        &::after{
            position: absolute;
            content: "";
            display: inline-block;
            width: r(1px);
            height: r(93px);
            background: #e3e3e3;
            top: 15%;
            right: 0;
        }
        p{
            &:first-of-type{
                font-size:r(30px);
            }
            &:nth-of-type(2){
                font-size: r(24px);
            }
        }
    }
    .leiji-order{
        width: r(320px);
        height: r(157px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p{
            &:first-of-type{
                font-size:r(30px);
            }
            &:nth-of-type(2){
                font-size: r(24px);
            }
        }
    }
}

.orderList{
    font-size: 0;
    width: r(640px);
    height: r(375px);
    margin-top: r(30px);
    background: white;
    .order-item{
        width: r(640px);
        height: r(95px);
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: r(1px) solid #e3e3e3;
        .order-img{
            width: r(50px);
            height: r(50px);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .order-title{
            font-size: r(26px);
            margin-left: r(15px);
            margin-right: r(330px);
        }
        .order-num{
            font-size: r(26px);
            color: red;
            margin-right: r(19px);
        }
        .order-enter {
            width: r(16px);
            height: r(28px);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.bottom-bar{
    font-size: 0;
    width: r(640px);
    height: r(100px);
    background: white;
    display: flex;
    position: absolute;
    bottom: 0;
    .duanxin,.phone{
        padding-top: r(12px);
        width: r(320px);
        height: r(100px);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        p{
            font-size: r(24px);
            color: $value-fontColor;
        }
    }
    .duanxin-img{
        width: r(40px);
        height: r(37px);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .phone-img{
        width: r(35px);
        height: r(35px);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.change-beizhu {
    font-size: 0;
    position: absolute;
    top: 30%;
    left: r(640px)/2 - r(540px)/2;
    width: r(540px);
    height: r(308px);
    background: #f8f8f8;
    padding: r(25px);
    border-radius: r(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none;
    p{
        font-size: r(32px);
    }
    .input{
        width: r(495px);
        height: r(55px);
        border: 1px solid #e3e3e3;
        border-radius: r(5px);
        margin-top: r(23px);
        margin-bottom: r(48px);
        .beizhu-input{
            width: r(493px);
             height: r(53px);
             border: none;
             outline: none;
        }
    }
    .btn{
        width: r(235px);
        height: r(78px);
        font-size: r(26px);
        text-align: center;
        line-height: r(78px);
        border-radius: r(5px);
    }
    .btn-contain{
        display: flex;
        justify-content: space-between;
    }
    .cancel-btn{
        background: #ffffff;
        color: $value-fontColor;
        margin-right: r(18px);
        border: r(1px) solid #e3e3e3;
    }
    .queding-btn{
        background: #cc3333;
        color: white;
        &:active {
            background: #921e1e;
        }
    }
}